<script setup name="GenEdit" lang="ts">
import { App } from 'ant-design-vue'
import BasicInfoForm from './basicInfoForm.vue'

import GenInfoForm from './genInfoForm.vue'
import { getGenTable, updateGenTable } from '@/api/tool/gen'
import type { DbColumnVO, DbTableVO } from '@/api/tool/gen/types'
import { optionselect as getDictOptionselect } from '@/api/system/dict/type'
import type { DictTypeVO } from '@/api/system/dict/type/types'

const router = useRouter()
const { message } = App.useApp()

const route = useRoute()
const activeName = ref('columnInfo')

const tableHeight = ref(`${document.documentElement.scrollHeight - 245}px`)
const tables = ref<DbTableVO[]>([])
const columns = ref<DbColumnVO[]>([])
const dictOptions = ref<DictTypeVO[]>([])
const info = ref<Partial<DbTableVO>>({})

const basicInfo = ref<InstanceType<typeof BasicInfoForm>>()
const genInfo = ref<InstanceType<typeof GenInfoForm>>()

/** 提交按钮 */
function submitForm() {
  const basicForm = basicInfo.value?.$refs.basicInfoForm
  const genForm = genInfo.value?.$refs.genInfoForm

  Promise.all([basicForm, genForm].map(getFormPromise)).then(async (res) => {
    const validateResult = res.every(item => !!item)
    if (validateResult) {
      const genTable: any = Object.assign({}, info.value)
      genTable.columns = columns.value
      genTable.params = {
        treeCode: info.value?.treeCode,
        treeName: info.value.treeName,
        treeParentCode: info.value.treeParentCode,
        parentMenuId: info.value.parentMenuId,
      }
      await updateGenTable(genTable)
      message.success('提交成功')
    }
    else {
      message.error('表单校验未通过，请重新检查提交内容')
    }
  })
}

function getFormPromise(form: any) {
  if (form) {
    return new Promise((resolve) => {
      form.validate().then(() => {
        resolve(true)
      })
    })
  }
  else {
    return new Promise((resolve) => {
      resolve(true)
    })
  }
}

function close() {
  router.back()
}

(async () => {
  const tableId = route.params && route.params.tableId as string
  if (tableId) {
    // 获取表详细信息
    const res = await getGenTable(tableId)
    columns.value = res.data.rows
    info.value = res.data.info
    tables.value = res.data.tables
    /** 查询字典下拉列表 */
    const response = await getDictOptionselect()
    dictOptions.value = response.data
  }
})()
</script>

<template>
  <a-card>
    <a-tabs v-model="activeName">
      <a-tab-pane key="basic" name="基本信息" tab="基本信息">
        <BasicInfoForm ref="basicInfo" :info="info" />
      </a-tab-pane>
      <a-tab-pane key="columnInfo" name="字段信息" tab="字段信息">
        <a-table :data-source="columns" row-key="columnId" :height="tableHeight">
          <a-table-column title="字段列名" data-index="columnName" width="10%" :ellipsis="true" />
          <a-table-column title="字段描述" width="10%">
            <template #default="{ record }">
              <a-input v-model:value="record.columnComment" placeholder="请输入字段描述" style="width: 100%" />
            </template>
          </a-table-column>
          <a-table-column title="物理类型" data-index="columnType" width="10%" :ellipsis="true" />
          <a-table-column title="Java类型" width="11%">
            <template #default="{ record }">
              <a-select v-model:value="record.javaType" style="width: 100%">
                <a-select-option label="Long" value="Long">
                  Long
                </a-select-option>
                <a-select-option label="String" value="String">
                  String
                </a-select-option>
                <a-select-option label="Integer" value="Integer">
                  Integer
                </a-select-option>
                <a-select-option label="Double" value="Double">
                  Double
                </a-select-option>
                <a-select-option label="BigDecimal" value="BigDecimal">
                  BigDecimal
                </a-select-option>
                <a-select-option label="Date" value="Date">
                  Date
                </a-select-option>
                <a-select-option label="Boolean" value="Boolean">
                  Boolean
                </a-select-option>
              </a-select>
            </template>
          </a-table-column>
          <a-table-column title="java属性" width="10%">
            <template #default="{ record }">
              <a-input v-model:value="record.javaField" style="width: 100%" />
            </template>
          </a-table-column>

          <a-table-column title="插入" width="5%">
            <template #default="{ record }">
              <a-checkbox v-model:checked="record.isInsert" value="1" false-label="0" />
            </template>
          </a-table-column>
          <a-table-column title="编辑" width="5%">
            <template #default="{ record }">
              <a-checkbox v-model:checked="record.isEdit" value="1" false-label="0" />
            </template>
          </a-table-column>
          <a-table-column title="列表" width="5%">
            <template #default="{ record }">
              <a-checkbox v-model:checked="record.isList" value="1" false-label="0" />
            </template>
          </a-table-column>
          <a-table-column title="查询" width="5%">
            <template #default="{ record }">
              <a-checkbox v-model:checked="record.isQuery" value="1" false-label="0" />
            </template>
          </a-table-column>
          <a-table-column title="查询方式" width="10%">
            <template #default="{ record }">
              <a-select v-model:value="record.queryType" style="width: 100%">
                <a-select-option label="=" value="EQ">
                  =
                </a-select-option>
                <a-select-option label="!=" value="NE">
                  !=
                </a-select-option>
                <a-select-option label=">" value="GT">
                  &gt;
                </a-select-option>
                <a-select-option label=">=" value="GE">
                  &gt;=
                </a-select-option>
                <a-select-option label="<" value="LT">
                  &lt;
                </a-select-option>
                <a-select-option label="<=" value="LE">
                  &lt;=
                </a-select-option>
                <a-select-option label="LIKE" value="LIKE">
                  LIKE
                </a-select-option>
                <a-select-option label="BETWEEN" value="BETWEEN">
                  BETWEEN
                </a-select-option>
              </a-select>
            </template>
          </a-table-column>
          <a-table-column title="必填" width="5%">
            <template #default="{ record }">
              <a-checkbox v-model:checked="record.isRequired" label="1" />
            </template>
          </a-table-column>
          <a-table-column title="显示类型" width="12%">
            <template #default="{ record }">
              <a-select v-model:value="record.htmlType" style="width: 100%">
                <a-select-option label="文本框" value="input">
                  文本框
                </a-select-option>
                <a-select-option label="文本域" value="textarea">
                  文本域
                </a-select-option>
                <a-select-option label="下拉框" value="select">
                  下拉框
                </a-select-option>
                <a-select-option label="单选框" value="radio">
                  单选框
                </a-select-option>
                <a-select-option label="复选框" value="checkbox">
                  复选框
                </a-select-option>
                <a-select-option label="日期控件" value="datetime">
                  日期控件
                </a-select-option>
                /
                <a-select-option label="图片上传" value="imageUpload">
                  图片上传
                </a-select-option>
                <a-select-option label="文件上传" value="fileUpload">
                  文件上传
                </a-select-option>
                <a-select-option label="富文本控件" value="editor">
                  富文本控件
                </a-select-option>
              </a-select>
            </template>
          </a-table-column>
          <a-table-column title="字典类型" width="12%">
            <template #default="{ record }">
              <a-select v-model:value="record.dictType" style="width: 100%" clearable filterable placeholder="请选择">
                <a-select-option
                  v-for="dict in dictOptions" :key="dict.dictType" :label="dict.dictName"
                  :value="dict.dictType"
                >
                  <span style="float: left">{{ dict.dictName }}</span>
                  <span style="float: right; color: #8492a6; font-size: 13px">{{ dict.dictType }}</span>
                </a-select-option>
              </a-select>
            </template>
          </a-table-column>
        </a-table>
      </a-tab-pane>
      <a-tab-pane key="genInfo" name="生成信息" tab="生成信息">
        <GenInfoForm ref="genInfo" :info="info" :tables="tables" />
      </a-tab-pane>
    </a-tabs>
    <a-form label-width="100px">
      <div style="text-align: center;margin-left:-100px;margin-top:10px;">
        <a-button type="primary" class="mr-10px" @click="submitForm()">
          提交
        </a-button>
        <a-button @click="close()">
          返回
        </a-button>
      </div>
    </a-form>
  </a-card>
</template>
